<template>
  <div>
    <commentParent
      :parentDepth="parentDepth - 1"
      :commentList="commentList.parent"
      @replyNicknameParent="diguireplyNickname"
      v-if="commentList.parent"
    />
    <div class="cmt-floor">
      <div class="cmt-content">
        <div class="cmt-info">
          {{ commentList.id }}
          <i>{{ commentList.updated_at | moment }}</i>
          <span>1</span>
        </div>
        <p class="cmt-message">{{ commentList.content }}</p>
        <el-row type="flex">
          <div v-if="commentList.pics.length === 0"></div>
          <div
            class="cmt-pic"
            v-else
            v-for="(images, i) in commentList.pics"
            :key="i"
          >
            <img :src="$axios.defaults.baseURL + images.url" alt="" />
          </div>
        </el-row>
        <div class="cmt-ctrl">
          <a href="javascript:;" @click="replyNicknameParent">回复</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commentParent",
  props: ["commentList", "parentDepth"],
  created() {
    console.log(this.parentDepth);
  },
  methods: {
    replyNicknameParent() {
      this.$emit("replyNicknameParent", {
        id: this.commentList.id,
        nickname: this.commentList.account.nickname
      });
    },
    diguireplyNickname(parentInfo) {
      console.log(parentInfo);
      this.$emit("replyNicknameParent", parentInfo);
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-floor {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 2px;
  .cmt-content {
    padding: 5px 10px 0;

    .cmt-info {
      font-size: 12px;
      color: #666;

      i {
        color: #999;
      }

      * {
        vertical-align: top;
      }

      span {
        float: right;
      }
    }

    .cmt-message {
      margin-top: 10px;
    }

    .cmt-pic {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 5px;
      margin-top: 10px;
      padding: 5px;
      border: 1px dashed #ddd;

      img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        cursor: pointer;
      }
    }
    .cmt-ctrl {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #1e50a2;
      text-align: right;

      * {
        display: none;
      }
    }
  }

  .cmt-content:hover {
    a {
      text-decoration: underline;
      display: block;
    }
  }
}
</style>
